<html>

<head>
  <title>RoughJS Map example with D3.js</title>
  <script src="https://rawgit.com/pshihn/rough/master/dist/rough.min.js"></script>
  <script src="https://d3js.org/d3.v4.min.js"></script>
</head>

<body>
  <h2>RoughJS Bar Chart example Using D3.js</h2>
  <canvas id="canvas" width="960" height="500"></canvas>

  <script>
    var canvas = document.getElementById('canvas');
    const rc = rough.canvas(canvas, {
      options: {
        fill: "blue",
        roughness: 0.8,
        bowing: 0.7
      }
    });

    var context = canvas.getContext("2d");
    var margin = { top: 20, right: 20, bottom: 30, left: 40 },
      width = canvas.width - margin.left - margin.right,
      height = canvas.height - margin.top - margin.bottom;
    var x = d3.scaleBand()
      .rangeRound([0, width])
      .padding(0.1);
    var y = d3.scaleLinear()
      .rangeRound([height, 0]);
    context.translate(margin.left, margin.top);

    d3.tsv("data.tsv", function (d) {
      d.frequency = +d.frequency;
      return d;
    }, function (error, data) {
      if (error) throw error;

      x.domain(data.map(function (d) { return d.letter; }));
      y.domain([0, d3.max(data, function (d) { return d.frequency; })]);

      var yTickCount = 10,
        yTicks = y.ticks(yTickCount),
        yTickFormat = y.tickFormat(yTickCount, "%");

      data.forEach(function (d) {
        rc.rectangle(x(d.letter), y(d.frequency), x.bandwidth(), height - y(d.frequency));
      });


      context.beginPath();
      x.domain().forEach(function (d) {
        context.moveTo(x(d) + x.bandwidth() / 2, height);
        context.lineTo(x(d) + x.bandwidth() / 2, height + 6);
      });
      context.strokeStyle = "black";
      context.stroke();

      context.textAlign = "center";
      context.textBaseline = "top";
      x.domain().forEach(function (d) {
        context.fillText(d, x(d) + x.bandwidth() / 2, height + 6);
      });

      context.beginPath();
      yTicks.forEach(function (d) {
        context.moveTo(0, y(d) + 0.5);
        context.lineTo(-6, y(d) + 0.5);
      });
      context.strokeStyle = "black";
      context.stroke();

      context.textAlign = "right";
      context.textBaseline = "middle";
      yTicks.forEach(function (d) {
        context.fillText(yTickFormat(d), -9, y(d));
      });

      context.beginPath();
      context.moveTo(-6.5, 0 + 0.5);
      context.lineTo(0.5, 0 + 0.5);
      context.lineTo(0.5, height + 0.5);
      context.lineTo(-6.5, height + 0.5);
      context.strokeStyle = "black";
      context.stroke();

      context.save();
      context.rotate(-Math.PI / 2);
      context.textAlign = "right";
      context.textBaseline = "top";
      context.font = "bold 10px sans-serif";
      context.fillText("Frequency", -10, 10);
      context.restore();
    });
  </script>
</body>

</html>